<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=no"
        />
        <title>Document</title>
    </head>
    <style>
        #box {
            width: 600px;
            height: 480px;
        }
    </style>
    <body>
        <div id="box"></div>
        <button onclick="fun()">获取位置</button>
    </body>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '7b1debe426ef12adff1dd0cd592c0405',
        }
    </script>
    <script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=46f0497e72ff7dddef9088430a7f7012"
    ></script>
    <script>
        function fun() {
            navigator.geolocation.getCurrentPosition((res) => {
                console.log(res.coords.longitude, res.coords.latitude)
                var map = new AMap.Map('box', {
                    zoom: 11, //级别
                    // center: [res.coords.longitude, res.coords.latitude], //中心点坐标
                    viewMode: '3D', //使用3D视图
                })
            })

            // console.log(navigator.geolocation)
            // if (navigator.geolocation) {
            //     console.log(123)
            //     navigator.geolocation.getCurrentPosition(
            //         function (res) {
            //             console.log('成功', res)
            //         },
            //         function (err) {
            //             console.log('失败', err)
            //         }
            //     )
            // }
        }
    </script>
</html>
